<template>
  <h1>{{ title }}</h1>
  <el-upload
      ref="upload"
      class="upload-demo"
      drag
      list-type="text"
      :auto-upload="false"
      v-model:file-list="fileList"
      :on-remove="handleRemove"
      :on-success="handleSuccess"
      :on-preview="handlePreview">
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
  </el-upload>
  <div v-if="fileUrl">
    <a :href="fileUrl" download>下载文件</a>
  </div>
  <el-button style="margin: 0 auto;" size="big" type="success" @click="submitUpload">提交</el-button>
</template>

<script>
export default {
  name: "ProjectFileView",
  props: {
    action: String,
    name: String,
    title: String,
    fileUrl: String,
  },
  data() {
    return {
      fileList: [],
      fileUrl: this.fileUrl
    };
  },
  methods: {
    submitUpload() {
      console.log(this.name)
      this.$refs.action=this.action
      this.$refs.name=this.name
      console.log(this.$refs)
      this.$refs.upload.submit();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
      this.fileUrl = '';
    },
    handleSuccess(response, file, fileList) {
      console.log(response);
      this.fileUrl = file.url;
    },
    handlePreview(file) {
      console.log(file);
    }
  }
}
</script>